<template>
  <el-dialog
    title="选择组件"
    :visible.sync="dialogTableVisible"
    @close="afterDialogClose"
  >
    <ul class="element-list" v-if="elementList.length">
      <li
        v-for="item in elementList"
        :key="item.ontologyElementId"
        @click="check(item)"
        :class="{ checked: item.checked }"
      >
        <div class="left">
          <div class="element-header">
            组件名称：{{ item.ontologyElementName }}
          </div>
          <div class="element-desc">
            组件描述：{{ item.ontologyElementDescribe }}
          </div>
          <!-- <el-checkbox v-model="item.checked" @change="checkedChange(item)">选择</el-checkbox> -->
                     <!-- @click.stop.native="check(item)"  -->
          <el-checkbox
            v-model="item.checked"

            >选择</el-checkbox
          >
        </div>
        <div class="right">
          <!-- <img :src="item.ontologyElementImgUrl" alt=""> -->
          <el-image
            style="width: 182px; height: 182px"
            :src="item.ontologyElementImgUrl"
            :preview-src-list="[item.ontologyElementImgUrl]"
          >
          </el-image>
        </div>
      </li>
    </ul>
    <!-- <div class="" v-else> 没有可用的组件 </div> -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :hide-on-single-page="!total"
      :page-size="pageSize"
      :pager-count="11"
      :current-page="pageNum"
      prev-text="上一页"
      next-text="下一页"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetDialogTable">取 消</el-button>
      <el-button type="primary" @click="submitDialogTable" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "InsertElementDialog",
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false,
    },
    ontologyAllId: {
      type: String,
      required: true,
    },
  },
  data: () => {
    return {
      pageSize: 10,
      pageNum: 1,
      total: 0,
      loading: false,
      elementList: [], // 组件列表
      checkMap: new Map(), // 缓存选中组件
    };
  },
  mounted() {
    // this.getAllElements();
  },
  methods: {
    getAllElements() {
      let { pageSize, pageNum } = this;
      let params = {
        pageSize,
        pageNum,
      };
      this.$axios
        .post(this.$api.ontologyModel.xuekuiObj.getAvailableElementData, params)
        .then((res) => {
          let data = res.data.data;
          // console.log('data',data)
          let code = res.data.code;
          if (code === 200) {
            this.elementList = data.list.map((item) => {
              let isChecked = this.checkMap.get(item.ontologyElementId);
              if (typeof isChecked === "undefined") {
                this.checkMap.set(item.ontologyElementId, false);
              }
              item.checked = isChecked ? isChecked : false;
              return item;
            });
            this.total = data.total;
            this.pageSize = data.pageSize;
            this.pageNum = data.pageNum;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    check(item) {
      item.checked = !item.checked;
      this.checkedChange(item);
    },
    // 修改当前页码
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getAllElements();
    },
    // 监听选中修改事件
    checkedChange(item) {
      console.log(item);
      this.checkMap.set(item.ontologyElementId, item.checked);
    },
    // 关闭模态框后重制状态
    afterDialogClose() {
      this.checkMap = new Map();
      this.pageNum = 1;
      this.getAllElements();
      this.$emit("resetDialogTable");
    },
    // 取消
    resetDialogTable() {
      this.$emit("resetDialogTable");
    },
    // 确定
    submitDialogTable() {
      // debugger;
      this.loading = true;
      let ontologyElementIds = [];
      this.checkMap.forEach((value, key) => {
        if (value) {
          ontologyElementIds.push(key);
        }
      });
      if (!ontologyElementIds.length) {
        this.resetDialogTable();
      } else {
        let params = {
          ontologyElementIds,
          ontologyAllId: this.ontologyAllId,
        };
        this.$axios
          .post(this.$api.ontologyModel.xuekuiObj.importElement, params)
          .then((res) => {
            let code = res.data.code;
            let data = res.data.data;
            if (code !== 200) {
              this.$message.error(res.data.message);
              this.loading = false;
              return;
            }
            this.$emit("submitDialogTable", data);
            this.loading = false;
          })
          .catch((err) => {
            console.error(err);
            this.loading = false;
          });
      }
      console.log("ontologyElementIds", ontologyElementIds);
    },
  },
  watch: {
    dialogTableVisible: {
      handler: function (val) {
        if (val) {
          this.getAllElements();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
$imgWidth: 180px;
$imgHeight: 180px;

/deep/ .el-dialog {
  max-height: 620px;
  width: 550px;
  .element-list {
    height: 405px;
    overflow: scroll;

    li {
      box-sizing: border-box;
      height: 200px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      margin-bottom: 5px;
      background: #fff;
      border-radius: 3px;
      border: 1px solid #eee;
      .left {
        box-sizing: border-box;
        height: 182px;
        font-size: 18px;
        width: 300px;
        position: relative;

        .element-header {
          margin-bottom: 10px;
          color: #333;
          height: 28px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .element-desc {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          box-sizing: border-box;
          font-size: 16px;
        }

        .el-checkbox {
          position: absolute;
          bottom: 0;
        }
      }

      .right {
        height: 182px;
        width: 182px;
        background-color: #fff;
        border: 0 none;
        .el-image {
          img {
            width: 180px;
            height: 180px;
            border: 1px solid #ccc;
            border-radius: 5px;
          }
        }
      }

      &.checked {
        background: #f3f4f8;
      }
    }
  }

  .el-pagination {
    position: relative;
    top: 15px;
  }
}
</style>
